<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="changeNum(1)">{{num}}</button>
        <hr/>
        <!-- 自定义事件的名字为suibian    -->
        <one :num="num" @suibian="changeNum"></one>
        <hr/>
        <!-- 自定义事件的名字为update:num    -->
        <two :num="num" @update:num="changeNum"></two>
        <hr/>
        <!--
            sync:
                1-向组件传递了属性num
                2-增加了自定义事件，事件的名字为@update:num,事件处理函数负责更新num的值（接收的值即是更新的值）    -->
        <three :num.sync="num"></three>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            changeNum(num){
                this.num=num;
            }
        },
        components:{
            One:{
                props:["num"],
                template:(`
                    <button @click="$emit('suibian',2)">one:{{num}}</button>
                `)
            },
            Two:{
                props:["num"],
                template:(`
                    <button @click="$emit('update:num',3)">two:{{num}}</button>
                `)
            },
            Three:{
                props:["num"],
                template:(`
                    <button @click="$emit('update:num',4)">three:{{num}}</button>
                `)
            }
        }
    })
</script>
</html>